<template>
    <div class="info-collect">
        <Crumb :name="$t('inventory.inventory')" v-if="header"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        :placeholder="$t('inventory.search')"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-input
                        v-model="key1"
                        size="small"
                        class="input"
                        :placeholder="$t('inventory.search1')"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-switch
                        style="margin-right: 10px;"
                        v-model="enableOrNot"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="0"
                        active-text="Enable"
                        inactive-text="Disable"
                        :inactive-value="1">
                </el-switch>
                <el-button
                        @click="search"
                        size="small"
                        type="primary"
                > {{$t('search')}}
                </el-button>
                <el-button type="primary" size="small" @click="download">{{$t('download')}}</el-button>
                <el-button type="primary" size="small" @click="download1">{{$t('download')}} Month</el-button>
                <el-select v-model="selectColumn"
                           collapse-tags
                           size="small"
                           style="margin-bottom: 10px;margin-left: 10px;"
                           multiple
                           placeholder="Select Show Column">
                    <el-option
                            v-for="item in column"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </Search>
            <div class="table-wrapper">

                <!--<el-button type="primary" size="small" @click="showSys = !showSys">{{showSys ? "隐藏":"查看"}}系统／主机</el-button>-->
                <el-table
                        :data="partLists"
                        v-loading="loading"
                        element-loading-text="Loading"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        border
                        row-key="id"
                        @filter-change="handleFilterChange"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand" width="80">
                        <template slot-scope="part">
                            <div>
                                <part-detail :partDetail="part.row"></part-detail>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('Part No')"
                            prop="partsNumber"
                            :label="$t('part.partNo')"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('中文描述')"
                            prop="denomination"
                            :label="$t('part.description')"
                    >
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('Description')"
                            prop="designation"
                            :label="$t('part.description')"
                    >
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('System')"
                            prop="systemName"
                            :filters="uniSystem"
                            :label="$t('part.system')"
                    >
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('Host')"
                            prop="hostNumber"
                            :filters="uniUnit"
                            :label="$t('part.unit')"
                    >
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('Stock')"
                            prop="stockQuantity"
                            :label="$t('part.stock')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="sumReady"
                            :label="$t('inventory.ready')"
                    >

                    </el-table-column>
                    <el-table-column
                            prop="sumSend"
                            :label="$t('inventory.send')"
                    >

                    </el-table-column>
                    <el-table-column
                            prop="warnLevel"
                            :label="$t('inventory.safe')"

                    >
                        <template slot-scope="scope">
                            {{scope.row.safeStock}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-if="selectColumn.includes('Warehouse')"
                            :label="$t('warehouse')"
                    >
                        <template slot-scope="scope">
                            <div>Schaman:{{scope.row.schamanQuantity?scope.row.schamanQuantity:0}}</div>
                            <div>Inline:{{scope.row.inlineQuantity?scope.row.inlineQuantity:0}}</div>
                            <div>IMIP:{{scope.row.reimipQuantity?scope.row.reimipQuantity:0}}</div>
                        </template>
                    </el-table-column>


                    <el-table-column
                            width="150px"
                            :label="$t('inventory.delivery')"
                            column-key="sendStatus"
                            prop="sendStatus"
                            :filters="[{
                                text:'Has Delivery',
                                value:1
                            }]"
                    >
                        <template slot-scope="part">
                            <div v-if="part.row.sumReady || part.row.sumSend">
                                <el-button type="text" size="mini" @click="showDetail(part.row)">
                                    {{$t('inventory.detail')}}
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>


                    <el-table-column :label="$t('operate')" width="250">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="text"
                                    @click="openStock(scope.row)">{{$t('inventory.record')}}</el-button>
                            <el-button type="text"
                                       size="small"
                                       @click="openChart(scope.row)">{{$t('chart')}}</el-button>
                            <el-button type="text"
                                       size="mini"
                                       @click="openRecord(scope.row)"
                            >{{$t('pandian')}}</el-button>
                            <el-button type="text" @click="showAbandon(scope.row)">{{scope.row.enableOrNot ? 'Enable' : 'Disable'}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
            <div class="modal-wrapper">
                <el-dialog
                        title="Sparepart Database"
                        top="10"
                        :visible.sync="dialogVisible"
                        width="80%"
                >
                    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item label="Product Brand" prop="brand">
                            <el-input v-model="ruleForm.brand"></el-input>
                        </el-form-item>
                        <el-form-item label="Part No" prop="partsNumber">
                            <el-input v-model="ruleForm.partsNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="Description" prop="designation">
                            <el-input v-model="ruleForm.designation"></el-input>
                        </el-form-item>
                        <el-form-item label="Description" prop="denomination">
                            <el-input v-model="ruleForm.denomination"></el-input>
                        </el-form-item>
                        <el-form-item label="Unit Model" prop="hostNumber">
                            <el-input v-model="ruleForm.hostNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="System" prop="systemName">
                            <el-input v-model="ruleForm.systemName"></el-input>
                        </el-form-item>
                        <el-form-item v-show="urlAvailible('changePrice')" label="Sale Price" prop="salePrice">
                            <el-input v-model="ruleForm.salePrice"></el-input>
                        </el-form-item>
                        <el-form-item v-show="urlAvailible('changePrice')" label="Purchase Price" prop="purchasePrice">
                            <el-input v-model="ruleForm.purchasePrice"></el-input>
                        </el-form-item>
                        <el-form-item label="Size" prop="size">
                            <el-input v-model="ruleForm.size"></el-input>
                        </el-form-item>
                        <el-form-item label="Weight" prop="weight">
                            <el-input v-model="ruleForm.weight"></el-input>
                        </el-form-item>
                        <el-form-item label="Instruction" prop="instruction">
                            <el-input v-model="ruleForm.instruction"></el-input>
                        </el-form-item>
                        <el-form-item label="Image">
                            <el-upload
                                    :on-success="successLoad"
                                    :on-remove="removeImage"
                                    class="upload-demo"
                                    list-type="picture"
                                    :file-list="imageList"
                                    drag
                                    name="upload_file"
                                    :action="url"
                                    multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">Drag here，or <em>Click to upload</em></div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>
                <el-dialog :visible.sync="stockVisible"
                           :title="partSelect.partsNumber+'/'+partSelect.denomination+'/'+partSelect.designation+' /Stock Record'"
                           width="80%">
                    <div>
                        <el-button style="margin-bottom: 20px;" type="primary" size="small"
                                   @click="getInvoice">
                            {{$t('download')}}
                        </el-button>
                    </div>
                    <part-stock-detail :stockInDetail="partStockInList"
                                       :total2="total2"
                                       :total3="total3"
                                       @inPageChange="inPageChange"
                                       @outPageChange="outPageChange"
                                       :stockOutDetail="partStockOutList"/>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="stockVisible = false">{{$t('cancel')}}</el-button>
                    </span>
                </el-dialog>
                <el-dialog
                        title="Different Storage"
                        :visible.sync="showDifferent"
                        width="100%"
                        top="0"
                >
                    <el-table
                            :data="differentList"
                            max-height="500"
                            style="width: 100%">
                        <el-table-column
                                prop="partsNum"
                                label="Parts Number"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="denomination"
                                label="Parts Name"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="designation"
                                label="Parts Name"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="statisticalQuantity"
                                label="Excel quantity"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="systemQuantity"
                                label="System quantity"
                                width="180">
                        </el-table-column>

                    </el-table>
                    <h4>Not Exist</h4>
                    <el-table
                            :data="notExistList"
                            max-height="500"
                            style="width: 100%;margin-top: 20px;">
                        <el-table-column
                                prop="partsNum"
                                label="Parts Number"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="denomination"
                                label="Parts Name"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="designation"
                                label="Parts Name"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="statisticalQuantity"
                                label="Excel quantity"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="systemQuantity"
                                label="System quantity"
                                width="180">
                        </el-table-column>

                    </el-table>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="showDifferent = false">ok</el-button>
                  </span>
                </el-dialog>
                <el-dialog
                        title="On Delivery"
                        :visible.sync="showDelivery"
                        width="100%"
                >
                    <el-table
                            :data="deliveryList"
                            border
                            stripe
                            style="width: 100%">
                        <el-table-column
                                type="expand"
                        >
                            <template slot-scope="scope">
                                <el-table
                                        :data="scope.row.comparePackAndStockInQuantityDTOList"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="batch"
                                            label="batch"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="packingQuantity"
                                            label="packingQuantity"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="sendContractNumber"
                                            label="sendContractNumber">
                                    </el-table-column>
                                    <el-table-column
                                            prop="shipInformation"
                                            label="shipInformation">
                                    </el-table-column>
                                    <el-table-column
                                            prop="stockInQuantity"
                                            label="stockInQuantity">
                                    </el-table-column>
                                    <el-table-column
                                            prop="remarks"
                                            label="remarks">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :label="$t('inventory.contractStatus')"
                        >
                            <template slot-scope="scope">
                                <span>{{scope.row.consignmentOrder}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="readyQuantity"
                                :label="$t('inventory.contractQty')"
                        >
                        </el-table-column>
                        <el-table-column
                                :label="$t('inventory.deliveryStatus')"
                        >
                            <template slot-scope="scope">
                                <span>{{scope.row.shipInformation}}-{{scope.row.sendGoodsOrder}}-{{scope.row.status === 1 ? scope.row.leaveDate : scope.row.arrivalDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="sendsQuantity"
                                :label="$t('inventory.deliveryQty')"
                        >
                        </el-table-column>
                        <el-table-column
                                label="备注"
                        >
                            <template slot-scope="scope">
                                <span>{{scope.row.remarks}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="showDelivery = false">{{$t('cancel')}}</el-button>
                  </span>
                </el-dialog>
                <el-dialog
                        :title="$t('chart')"
                        :visible.sync="chartVisible"
                        width="80%"
                >
                    <div class="echarts-content" style="width: 100%;">
                        <bar-chart :options="options2"
                                   style="margin-top: 10px;
                                width: 100%;
                                 display: block;
                                 vertical-align: top;
                                 text-align: left"></bar-chart>

                    </div>
                    <span slot="footer" class="dialog-footer">
            <el-button @click="chartVisible = false">{{$t('cancel')}}</el-button>
          </span>
                </el-dialog>
                <el-dialog
                        title="Abandon/Reuse"
                        :visible.sync="dialogVisible4"
                        width="30%"
                        >
                    <el-form label-width="120px">
                        <el-form-item label="Warehouse">
                            <el-select v-model="enable.warehouse" placeholder="Warehouse">
                                <el-option
                                        v-for="item in warehouseList"
                                        :key="item.id"
                                        :label="item.warehouseName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Status">
                            <el-switch
                                    v-model="enable.enableOrNot"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    :active-value="0"
                                    active-text="Enable"
                                    inactive-text="Disable"
                                    :inactive-value="1">
                            </el-switch>
                        </el-form-item>
                    </el-form>
                    <span>
                    <el-button @click="dialogVisible4 = false">{{$t('cancel')}}</el-button>
                    <el-button type="primary" @click="subEnable">{{$t('confirm')}}</el-button>
                  </span>
                </el-dialog>
                <inventory-record :part="partSelect"
                                  ref="record"
                                  :belong-module="belongModule"> </inventory-record>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import partStockDetail from '@/components/part/partStockDetail'
    import {getWarehouseList} from "../../api/warehouse";
    import {
        getPartStockDetail,
        checkInventory,
        getUniSystem,
        getUniUnit,
        partDeliveryStatus,
        getInventoryList, getInventoryList1
    } from "../../api";
    import inventoryRecord from './inventoryRecord'
    import {mapGetters} from 'vuex';
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {baseURL} from "../../util";
    import partDetail from '../../components/part/partDetail'
    import {money} from "../../util";
    import * as moment from "moment";
    import {stockOutChart} from "../../api/shanxi";
    import barChart from '../../components/shanxi/barChart'
    import {getStockInInfo} from "../../api/stockIn";
    import {getStockOutInfo} from "../../api/stockOut";
    import {banUnbanPart} from "../../api/inventory";

    export default {
        name: "inventory",
        mixins: [mixins, authMixins],
        props: {
            belongModule: {
                type: Number
            },
            header: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                x:[],
                y:[],
                y1:[],
                y2:[],
                total2: 0,
                total3: 0,
                imageList: [],
                uniSystem: [],
                uniUnit: [],
                partList: [],
                partLists1: [],
                filterOption: [],
                partStockInList: [],
                partStockOutList: [],
                part: [],
                ruleForm: {},
                loading: true,
                rules: {},
                url: baseURL + '/file/uploadFileCDN',
                key: '',
                key1: '',
                enableOrNot:0,
                dialogVisible: false,
                dialogVisible4: false,
                stockVisible: false,
                differentList: [],
                notExistList: [],
                deliveryList: [],
                showDifferent: false,
                showDelivery: false,
                showSys: false,
                chartVisible: false,
                current: {},
                warehouseList:[],
                stock: {
                    partId: '',
                    quantity: ''
                },
                enable:{
                    enableOrNot:0,
                    warehouse:'',
                },
                partSelect: {},
                selectColumn: [
                    'Part No',
                    '中文描述',
                    'Description',
                    'Stock',
                    'Warehouse'
                ]
            }
        },
        provide(){
            return {
                getList:this.getPartInventory
            }
        },
        created() {
            this.getWarehouseList()
            this.getPartInventory();
            // this.getPartInventory1()
            this.getUniUnit();
            this.getUniSystem();
            this.column = [
                'Part No',
                '中文描述',
                'Description',
                'System',
                'Host',
                'Stock',
                'Warehouse'
            ]
        },
        filters: {
            money(num) {
                return money(num)
            }
        },

        computed: {
            ...mapGetters(['auth']),
            options2() {
                return {
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                title: 'Save As Image'
                            },
                            dataView: {
                                show: true,
                                title: 'Data View'
                            },
                        },
                    },
                    color:['#c60023','#409eff','#abcdef'],
                    title: {
                        text: this.partSelect.partsNumber + '/' + this.partSelect.denomination + '配件出入库统计'
                    },
                    legend: {
                        data: ['出库', '入库', '在库']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.x
                    },
                    yAxis: {
                        type: 'value',
                        min: 0
                    },
                    label: {
                        show: true,
                        // formatter: "{a}"
                    },
                    series: [
                        {
                            name: '出库',
                            data: this.y,
                            smooth: true,
                            type: 'line',
                        },
                        {
                            name: '入库',
                            data: this.y1,
                            smooth: true,
                            type: 'line'
                        },
                        {
                            name: '在库',
                            data: this.y2,
                            type: 'bar'
                        }
                    ]
                }
            },
            partLists() {
                return this.partList
            },
            stockList() {
                return this.partLists.map(item => {
                    return item.map
                })
            }
        },
        mounted() {
            this.$nextTick(() => {
                import('../../util/pdf.js').then(model => {
                    this.pdf = model.default;
                })
            })
        },
        methods: {
            async subEnable(){
                const {status,msg} = await banUnbanPart({
                    partsId: this.partSelect.partsId,
                    belongModule:this.belongModule,
                    enableOrNot:this.enable.enableOrNot,
                    warehouse:this.enable.warehouse
                })
                if (status === ERROR_OK) {
                    this.$message.success(this.$t('success'))
                    this.$set(this.partSelect,'enableOrNot',this.enable.enableOrNot)
                    this.dialogVisible4 = false
                } else {
                    this.$message.error(msg)
                }
            },
            async getWarehouseList(){
                const {status ,data} = await getWarehouseList()
                if (status === ERROR_OK) {
                    this.warehouseList = data
                }
            },
            showAbandon(row){
                this.partSelect = row;
                this.dialogVisible4 = true
            },
            openRecord(row){
                this.partSelect = row;
                setTimeout(()=>{
                    this.$refs.record.open()
                },100)

            },
            async openChart(row) {
                this.partSelect = row;
                const {status, data, msg} = await stockOutChart({
                    partsId: row.partsId,
                    warehouse: 1,
                    belongModule: this.belongModule
                });
                if (status === ERROR_OK) {
                    this.x = Object.keys(data); // 横坐标 代表了日期
                    this.y = this.x.map(item => data[item] ? data[item].outQuantity : '0')
                    this.y1 = this.x.map(item => data[item] ? data[item].inQuantity : '0')
                    this.y2 = this.x.map(item => data[item] ? data[item].inventory : '0')
                    this.chartVisible = true
                    this.$forceUpdate()
                } else {
                    this.$message.error(msg)
                }
            },
            getInvoice() {
                let total = 0;
                this.partStockInList.forEach(item => {
                    total += item.partsQuantity
                });
                let total1 = 0;
                this.partStockOutList.forEach(item => {
                    total1 += item.partsQuantity
                })
                let body1 = [
                    [
                        {text: this.$t('stockOut.stockOutNo'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {
                            text: this.$t('stockOut.stockOutDate'),
                            style: 'tableHeader',
                            alignment: 'center',
                            width: '20%'
                        },
                        {text: this.$t('part.qty'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('warehouse'), style: 'tableHeader', alignment: 'center', width: '20%'},
                        {text: this.$t('stockOut.customer'), style: 'tableHeader', alignment: 'center', width: '20%'},
                    ],
                ];
                const mainBody1 = this.partStockOutList.map((item) => {
                    return [
                        {text: item.stockOutNum, style: 'text'},
                        {text: item.stockOutDate, style: 'text'},
                        {text: item.partsQuantity, style: 'text'},
                        {text: item.warehouseDesc, style: 'text'},
                        {text: item.customer, style: 'text'},
                    ]
                });
                body1 = body1.concat(mainBody1).concat([[{}, {}, {text: total1, style: 'text'}, {}, {}]]);
                let body = [
                    [
                        {text: this.$t('stockIn.stockInNo'), style: 'tableHeader', alignment: 'center',},
                        {text: this.$t('stockIn.stockInDate'), style: 'tableHeader', alignment: 'center',},
                        {text: this.$t('stockIn.shipNumber'), style: 'tableHeader', alignment: 'center',},
                        {text: this.$t('part.qty'), style: 'tableHeader', alignment: 'center',},
                        {text: this.$t('warehouse'), style: 'tableHeader', alignment: 'center',},
                        {text: this.$t('stockIn.stockInType'), style: 'tableHeader', alignment: 'center',},
                    ],
                ];
                const mainBody = this.partStockInList.map((item) => {
                    return [
                        {text: item.stockInNum, style: 'text'},
                        {text: item.stockInDate, style: 'text'},
                        {text: item.shipInformation, style: 'text'},
                        {text: item.partsQuantity, style: 'text'},
                        {text: item.warehouseDesc, style: 'text'},
                        {text: item.stockInDesc, style: 'text'},
                    ]
                });

                body = body.concat(mainBody).concat([[{}, {}, {}, {text: total, style: 'text'}, {}, {}]]);
                let doc = {
                    filename: 'QO',
                    pageSize: 'LEGAL',
                    pageMargins: [10, 100, 10, 60],
                    header: [
                        {
                            margin: [20, 20, 20, 20],
                            columns: [
                                {
                                    width: '70%',
                                    text: [
                                        {
                                            text: 'PT INDONESIA EQUIPMENT LINE\n',
                                            style: 'header'
                                        },
                                        {
                                            text: "Leading in Service Innovation\n",
                                            style: 'subTitle'
                                        },
                                        this.partSelect.partsNumber + '/' + this.partSelect.denomination
                                    ],

                                },
                                {
                                    width: '*',
                                    text: 'Stock Record',
                                    style: 'title',
                                    alignment: 'right'
                                }
                            ],
                        }
                    ],
                    content: [
                        {
                            text: {text: '入库记录/Stock In Record', width: '100%'}
                        },
                        {
                            layout: 'lightHorizontalLines',
                            width: '100%',
                            alignment: 'center',
                            table: {
                                widths: ['25%', '10%', '20%', '15%', '15%', '15%'],
                                headerRows: 2,
                                body: body
                            }
                        },
                        {
                            text: '出库记录/Stock Out Detail'
                        },
                        {
                            layout: 'lightHorizontalLines',
                            width: '100%',
                            alignment: 'center',
                            table: {
                                widths: ['*', '*', '*', '*', '*'],
                                headerRows: 2,
                                body: body1
                            }
                        }
                    ],
                    footer: [
                        {
                            text: 'If you have any questions or concerns, please contact 0800-1581212',
                            width: '100%',
                            alignment: 'center'
                        },
                        {text: 'THANK YOU FOR YOUR BUSINESS! ', width: '100%', alignment: 'center'}
                    ],

                    defaultStyle: {
                        font: 'msyh'
                    },

                    styles: {
                        tableHeader: {
                            fontSize: 10
                        },
                        text: {
                            fontSize: 10
                        },
                        header: {
                            fontSize: 10,
                            bold: true
                        },
                        title: {
                            fontWeight: 'light',
                            fontSize: 25,
                            bold: false
                        },
                        subTitle: {
                            fontSize: 12,
                            bold: true,
                            italic: true
                        }
                    }

                }
                this.pdf.open(doc);
            },

            showDetail(part) {
                this.getDeliveryDetail(part.partsId);
                this.showDelivery = true
            },
            async getDeliveryDetail(id) {
                const {status, data} = await partDeliveryStatus(id, this.belongModule);
                if (status === ERROR_OK) {
                    this.deliveryList = data
                }
            },
            async getPartInventory() {
                const {status, data} = await getInventoryList({
                    belongModule: this.belongModule,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    sendStatus: this.sendStatus || undefined,
                    partsNumber: this.key,
                    description: this.key1,
                    enableOrNot:this.enableOrNot
                });
                if (status === ERROR_OK) {
                    this.partList = data.list;
                    this.total = data.total;
                    this.loading = false;
                    window.scrollTo(0, 0)
                }
            },

            handleFilterChange(row) {
                Object.keys(row).forEach(item => {
                    this[item] = row[item][0]
                })
                this.getPartInventory()
            },
            // handleFilterChange(filter){
            //     Object.keys(filter).forEach((key)=>{
            //         this.filterOption = filter[key]
            //     });
            // },
            async getUniUnit() {
                const {status, data} = await getUniUnit();
                if (status === ERROR_OK) {

                    this.uniUnit = data.map(item => {
                        return {
                            text: item,
                            value: item
                        }
                    });
                }
            },
            async getUniSystem() {
                const {status, data} = await getUniSystem();
                if (status === ERROR_OK) {
                    this.uniSystem = data.map(item => {
                        return {
                            text: item,
                            value: item
                        }
                    });
                }
            },
            async inInfo(pageNum = 1, pageSize = 100) {
                const {status, data} = await getStockInInfo({
                    partsId: this.partSelect.partsId,
                    belongModule: this.belongModule,
                    pageNum: pageNum,
                    pageSize
                });
                if (status === ERROR_OK) {
                    this.partStockInList = data.stockInDetail.list;
                    this.total2 = data.stockInDetail.total
                } else {
                    this.$notify.error('Error,please retry')
                }
            },
            async outInfo(pageNum = 1, pageSize = 100) {
                const {status, data} = await getStockOutInfo({
                    partsId: this.partSelect.partsId,
                    belongModule: this.belongModule,
                    pageNum: pageNum,
                    pageSize
                });
                if (status === ERROR_OK) {
                    this.partStockOutList = data.stockOutDetail.list;
                    this.total3 = data.stockOutDetail.total
                } else {
                    this.$notify.error('Error,please retry')
                }
            },
            inPageChange(page) {
                this.inInfo(page)
            },
            outPageChange(page) {
                this.outInfo(page)
            },
            async openStock(stock) {
                this.partSelect = stock;
                this.inInfo()
                this.outInfo()
                this.stockVisible = true

            },

            search() {
                this.pageNum = 1;
                this.getPartInventory()
                // this.getPartInventory1()
            },
            async fileChange(e) {
                const files = e.target.files;
                const file = files[0];
                if (file) {
                    let formData = new FormData();
                    formData.append('exFiles', file);
                    formData.append('inventoryDate', moment().format('YYYY-MM-DD'));
                    formData.append('belongModule', this.belongModule);
                    // formData.append('belongModule',this.warehouse);
                    const {status, data} = await checkInventory(formData);
                    if (status === ERROR_OK) {
                        this.differentList = data.data.differentInventory;
                        this.notExistList = data.data.noStockInformation;
                        this.showDifferent = true
                    }
                } else {
                    this.$notify.error()
                }
                this.$nextTick(() => {
                    this.$refs.file.value = ''
                })
            },

            changePage(page) {
                this.pageNum = page;
                this.getPartInventory();
                // this.getPartInventory1();
            },

            download() {
                window.open(baseURL + '/statistical_report/export_excel_part_stock.file?belongModule=' + this.belongModule)
            },
            download1() {
                window.open(baseURL + `/statistical_report/export_excel_part_stock_of_month.file?belongModule=${this.belongModule}&startTime=${moment().format('YYYY-MM-DD')}`)
            }
        },
        components: {
            Crumb,
            Search,
            partStockDetail,
            partDetail,
            barChart,
            inventoryRecord
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        label {
            display: inline-block;
            line-height: 30px;
            padding: 0 20px;
            border-radius: 3px;
            cursor: pointer;
            background: #409eff;
            height: 30px;
            color: white;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
            &:hover {
                background: #6495ed;
            }
        }
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>